<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-04-11 11:08:53
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-30 16:33:25
 * @FilePath: /tea-garden-web/src/pages/farming-calendar.vue
 * @Description: 农事日历
-->
<template>
  <div class="farming-calendar">
    <div class="top-area">
      <i class="icon-button-back" @click="$router.push({ name: 'baseOverview' })" />
      <i class="icon-button-add" @click="handleFramingOperate('showAddDialog')" title="新建农事计划" />
      <span class="page-name">农事日历</span>
      <section class="search-input" v-if="false">
        <input type="text" class="input" placeholder="地块名称、序号" :value="query" @input="setQuery" />
      </section>
      <section class="legends">
        <section class="legend" :style="{
          'background-color': farmingFilters.find((filter) => {
            return filter === item.id;
          })
            ? '#ffffff'
            : legendColors[index],
          color: farmingFilters.find((filter) => {
            return filter === item.id;
          })
            ? legendColors[index]
            : '#ffffff',
          'border-color': legendColors[index],
        }" v-for="(item, index) in getDictByParentId(2)" :key="index" @click="handleClickLegend(item)">
          {{ item.name }}
        </section>
      </section>
    </div>
    <div class="left-area">
      <el-row class="table-header">
        <!-- <el-col :span="12">分组</el-col> -->
        <el-col :span="24">地块编号</el-col>
      </el-row>
      <div class="table-content" ref="leftContent" @scroll="handleLeftScroll()" @touchstart="handleChangeFlag(false)"
        @mousemove="handleChangeFlag(false)">
        <el-skeleton animated :loading="loading.farmlands">
          <template #template>
            <el-skeleton-item v-for="(item, index) in 14" :key="index" variant="rect"
              style="height: 39.5px; background: #f2f2f2" />
          </template>
          <template #default>
            <el-row class="table-row" v-for="(item, index) in farmlands" :key="index">
              <template v-if="index === 0">
                <!-- <el-col :span="12" class="row-group">{{
                  item.group_name
                }}</el-col> -->
                <el-col :span="24" class="row-num">{{
                  item.massifNum
                }}</el-col>
              </template>
              <template v-else-if="index > 0 &&
                  item.group_name !== farmlands[index - 1].group_name
                  ">
                <!-- <el-col :span="12" class="row-group">{{
                  item.group_name
                }}</el-col> -->
                <el-col :span="24" class="row-num">{{
                  item.massifNum
                }}</el-col>
              </template>
              <template v-else>
                <!-- <el-col :span="12" :offset="12" class="row-num"> -->
                <el-col :span="24" class="row-num">
                  {{ item.massifNum }}
                </el-col>
              </template>
            </el-row>
          </template>
        </el-skeleton>
      </div>
    </div>
    <div class="right-area">
      <div class="calendar">
        <section class="calendar-header">
          <el-row class="calendar-date-range">
            <el-col :span="2" class="calendar-date" v-for="(date, index) in dateRange" :key="index">
              <div class="col-month">
                <section class="font-month" v-if="index === 0 || date.day === 1">
                  {{ date.month }}
                </section>
              </div>
              <div class="col-date" :class="{
                'col-weekend':
                  date.weekDay === '周六' || date.weekDay === '周日',
              }">
                <section class="font-day">{{ date.day }}</section>
                <section class="font-weekday">{{ date.weekDay }}</section>
              </div>
            </el-col>
          </el-row>
        </section>
        <el-skeleton animated :loading="loading.farmlands">
          <template #template>
            <section class="calendar-content">
              <el-row class="calendar-row" v-for="(row, rowIndex) in 14" :key="rowIndex">
                <el-col :span="2" v-for="(col, colIndex) in 12" :key="colIndex" class="calendar-col">
                  <el-skeleton-item variant="text" style="height: 100%" />
                </el-col>
              </el-row>
            </section>
          </template>
          <template #default>
            <section class="calendar-content" ref="rightContent" @scroll="handleRightScroll()"
              @touchstart="handleChangeFlag(true)" @mousemove="handleChangeFlag(true)">
              <el-row class="calendar-row" v-for="(rowValue, rowName) in calendarContent" :key="rowName">
                <el-col class="calendar-col" :span="2" v-for="(col, colIndex) in rowValue" :key="colIndex"
                  :class="calendarColClass(col)" @click="handleFramingOperate('showDetail', col[0])">
                  {{ col[0] ? col[0].massifNum : "" }}
                </el-col>
              </el-row>
            </section>
          </template>
        </el-skeleton>
        <i class="before-button" @click="handleClickBeforeOrAfterButton('before')" />
        <i class="after-button" @click="handleClickBeforeOrAfterButton('after')" />
      </div>
    </div>
    <!-- 弹窗 -->
    <section class="dialog-bg" v-if="visableDialog">
      <section class="dialog-window">
        <section class="dialog-header">
          <section class="name">{{ dialogName }}</section>
          <section class="icon-close" @click="handleFramingOperate('cancleDialog')"></section>
        </section>
        <section class="dialog-content">
          <el-steps class="steps" :active="step" align-center finish-status="success" v-if="dialogName === '新建农事计划'">
            <el-step title="农事类型" />
            <el-step title="农事详情" />
            <el-step title="人员与设备" />
          </el-steps>
          <section class="farming-types" v-if="dialogName === '新建农事计划' && step === 0">
            <section class="type-button" :style="{ 'color': legendColors[index] }"
              v-for="(item, index) in getDictByParentId(2)" :key="index"
              @click="handleFramingOperate('selectFarmingType', item.id)">
              {{ item.name }}
            </section>
          </section>
          <section class="farming-detail" v-if="dialogName === '新建农事计划'">
            <el-form label-position="top" v-if="step === 1">
              <el-form-item label="地块">
                <el-select v-model="form.lands" placeholder="选择地块" multiple clearable style="width: 100%;">
                  <el-option v-for="(item, index) in farmlands" :key="index" :label="item.massifNnum"
                    :value="item.massifId" />
                </el-select>
              </el-form-item>
              <el-form-item label="日期">
                <el-date-picker v-model="form.date" type="date" placeholder="选择日期" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" style="width: 100%;" />
              </el-form-item>
              <el-form-item :label="kindLabel(form.farmingType)" v-if="showKindLabel(form.farmingType)">
                <el-input v-model="form.type" placeholder="请输入" />
              </el-form-item>
              <el-form-item :label="quantityLabel(form.farmingType)" v-if="showQuantityLabel(form.farmingType)">
                <el-input v-model="form.quantity" placeholder="请输入" />
              </el-form-item>
            </el-form>
            <el-form label-position="top" v-if="step === 2">
              <el-form-item label="人员">
                <el-select v-model="form.relevantPersonnel" placeholder="选择人员" multiple clearable style="width: 100%;">
                  <el-option v-for="(item, index) in users" :key="index" :label="item.userName" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="设备">
                <el-select v-model="form.associatedEquipment" placeholder="选择设备" multiple clearable style="width: 100%;">
                  <el-option v-for="(item, index) in allEquipment" :key="index" :label="item.equipment_name"
                    :value="item.equipment_name" />
                </el-select>
              </el-form-item>
            </el-form>
          </section>
          <!-- 详情弹窗 -->
          <section class="farming-list" v-if="dialogName === '农事计划详情'">
            <el-row>
              <el-col :span="12" class="farmland">
                {{ selectedCell.massifNum }}
              </el-col>
              <el-col :span="12" class="farming-date">
                {{ selectedCell.planTime }}
              </el-col>
            </el-row>
            <section class="farming" v-for="(item, index) in farmingPlans" :key="index">
              <section class="title">
                <span class="type">{{ getDictItemNameById(item.farmingType) }}</span>
                <span class="status">{{ getDictItemNameById(item.state) }}</span>
              </section>
              <section class="content">
                <section class="content-item">
                  <span class="item-name">地块:</span>
                  <span class="item-value">{{ item.massifNum.toString() }}</span>
                </section>
                <section class="content-item" v-if="showKindLabel(item.farmingType)">
                  <span class="item-name">{{ kindLabel(item.farmingType) }}:</span>
                  <span class="item-value">{{ item.kind }}</span>
                </section>
                <section class="content-item" v-if="showQuantityLabel(item.farmingType)">
                  <span class="item-name">{{ quantityLabel(item.farmingType) }}:</span>
                  <span class="item-value">{{ item.quantity }}</span>
                </section>
              </section>
            </section>
          </section>
        </section>
        <section class="dialog-footer" v-if="dialogName === '新建农事计划'">
          <el-button class="button1" v-if="step !== 0" @click="handleFramingOperate('previousStep')">上一步</el-button>
          <el-button class="button2" v-if="step !== 2" @click="handleFramingOperate('nextStep')">下一步</el-button>
          <el-button class="button2" v-if="step === 2" @click="handleFramingOperate('addFarmingPlan')">确认</el-button>
        </section>
      </section>
    </section>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import { DateTime, Duration } from 'luxon'
export default {
  data () {
    return {
      scrollFlag: true,
      // 显示弹窗
      visableDialog: false,
      // 弹窗名称
      dialogName: '',
      // 弹窗表单
      // form: {
      //   setp: '',
      //   farmingType: '',
      //   massif_ids: [],
      //   is_time_range: 2,
      //   time1: '',
      //   end_time: '',
      //   kind: '',
      //   quantity: '',
      //   user_ids: [],
      //   device_ids: [],
      //   // 13 待执行 14待发布 15待检查
      //   status_: 15,
      //   is_warn: '',
      //   warn_notice_time: '',
      //   warn_notice_content: '',
      //   is_task: '',
      //   task_notice_time: '',
      //   task_notice_user: '',
      //   task_notice_phone: '',
      //   task_notice_content: ''
      // },
      form: {
        farmingType: '',
        lands: '',
        type: '',
        quantity: '',
        relevantPersonnel: [],
        associatedEquipment: [],
        // 13 待执行 14待发布 15待检查
        state: 13
      },
      step: '',
      // 选中的单元格
      selectedCell: {}
    }
  },
  computed: {
    ...mapState('farming-calendar', ['query', 'dateNow', 'dateRange', 'farmlands', 'legendColors', 'farmingFilters', 'allFarmingPlans', 'farmingPlans', 'loading']),
    ...mapState('base-overview', ['currentId', 'allEquipment']),
    ...mapState('manager-person', ['users']),
    ...mapGetters('farming-calendar', ['calendarContent']),
    ...mapGetters('common', ['getDictByParentId', 'getDictItemNameById'])
  },
  watch: {
    query () {
      this.getFarmlands()
    },
    dateRange () {
      this.getAllFarmingPlans()
    },
    farmingFilters: {
      handler () {
        this.getAllFarmingPlans()
      },
      deep: true
    }
  },
  methods: {
    ...mapMutations('farming-calendar', ['setQuery', 'setDateRange', 'setFarmingFilters', 'setCommonState']),
    ...mapActions('farming-calendar', ['getFarmlands', 'getAllFarmingPlans', 'getFarmingPlans', 'getFarmingPlanDetail', 'AddFarmingPlan']),
    ...mapActions('manager-person', ['getUsers']),
    ...mapActions('base-overview', ['getAllEquipment']),
    // 点击图例
    handleClickLegend (item) {
      this.setFarmingFilters(item)
    },
    // 日历单元格样式
    calendarColClass (col) {
      const classes = {}
      if (col.length > 0) {
        classes[`bg-farming-${col[0].farmingType}`] = true
      }
      if (col.length > 1) {
        classes.more = true
      }
      return classes
    },
    // 点击日历向前或向后按钮
    handleClickBeforeOrAfterButton (type) {
      this.setDateRange(DateTime.fromISO(this.dateNow).plus(Duration.fromObject({ day: type === 'before' ? -12 : 12 })).toISODate())
    },
    // 修改滚动flag, 避免互相触发滚动陷入死循环
    handleChangeFlag (flag) {
      this.scrollFlag = flag
    },
    // 左侧滚动事件
    handleLeftScroll () {
      if (!this.scrollFlag) {
        this.$refs.rightContent.scrollTop = this.$refs.leftContent.scrollTop
      }
    },
    // 右侧滚动事件
    handleRightScroll () {
      if (this.scrollFlag) {
        this.$refs.leftContent.scrollTop = this.$refs.rightContent.scrollTop
      }
    },
    arrayToString (array) {
      return array.length === 1 ? `${array[0]}` : array.join(',')
    },
    // 农事相关操作
    async handleFramingOperate (type, val) {
      switch (type) {
        case 'showAddDialog':
          this.dialogName = '新建农事计划'
          this.step = 0
          this.visableDialog = true
          break
        case 'cancleDialog':
          this.visableDialog = false
          this.dialogName = ''
          this.step = 0
          break
        case 'selectFarmingType':
          this.form.farmingType = val
          this.handleFramingOperate('nextStep')
          break
        case 'nextStep':
          if (!this.form.farmingType) {
            this.$message.error('请选择农事类型')
            return
          }
          if (!this.form.lands.length && this.step === 1) {
            this.$message.error('请选择地块')
            return
          }
          if (!this.form.date && this.step === 1) {
            this.$message.error('请选择时间')
            return
          }
          this.step = this.step + 1
          break
        case 'previousStep':
          this.step = this.step - 1
          break
        case 'addFarmingPlan':
          if (this.form.relevantPersonnel.length === 0 && this.step === 2) {
            this.$message.error('请选择人员')
            return
          }
          if (this.form.associatedEquipment.length === 0 && this.step === 2) {
            this.$message.error('请选择设备')
            return
          }
          this.form.lands = this.form.lands.toString()
          this.form.associatedEquipment = this.form.associatedEquipment.toString()
          this.form.relevantPersonnel = this.form.relevantPersonnel.toString()
          await this.AddFarmingPlan(this.form)
          this.handleFramingOperate('cancleDialog')
          this.form = this.$options.data().form
          break
        case 'showDetail':
          if (val) {
            this.dialogName = '农事计划详情'
            this.selectedCell = val
            await this.getFarmingPlans(val)
            this.visableDialog = true
          }
          break
      }
    },
    showKindLabel (farmingType) {
      return [4, 9].findIndex((item) => item === farmingType) !== -1
    },
    kindLabel (farmingType) {
      let label = ''
      switch (farmingType) {
        case 4:
          label = '肥料类型'
          break
        case 9:
          label = '药剂类型'
          break
        case 3:
          label = '采摘品种'
          break
      }
      return label
    },
    showQuantityLabel (farmingType) {
      return [3, 4, 5, 9].findIndex((item) => item === farmingType) !== -1
    },
    quantityLabel (farmingType) {
      let label = ''
      switch (farmingType) {
        case 3:
          label = '采摘量'
          break
        case 4:
          label = '施肥量'
          break
        case 5:
          label = '灌溉量'
          break
        case 9:
          label = '药剂量'
          break
      }
      return label
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getFarmlands()
      vm.setDateRange()
      vm.getUsers()
      vm.getAllEquipment()
    })
  }
}
</script>

<style lang="scss">
.farming-calendar {
  height: 100%;
  overflow-y: auto;
  background: #eff7f8;
  position: relative;

  .top-area {
    position: relative;

    .icon-button-back {
      width: 18px;
      height: 18px;
      background-image: url("/public/image/common/icon-button-back-03.png");
      background-size: cover;
      position: absolute;
      left: 27px;
      top: 30.5px;
    }

    .page-name {
      font-size: 18px;
      font-family: PingFang SC-Heavy, PingFang SC;
      font-weight: 800;
      color: #089bab;
      height: 25px;
      width: 100px;
      text-align: center;
      position: absolute;
      left: 52px;
      top: 27px;
    }

    .icon-button-add {
      width: 18px;
      height: 18px;
      background-image: url("/public/image/common/icon-button-add.png");
      background-size: cover;
      position: absolute;
      left: 210.5px;
      top: 30.5px;
      cursor: pointer;
    }

    .search-input {
      position: absolute;
      left: 252px;
      top: 25.5px;

      &::before {
        display: inline-block;
        vertical-align: middle;
        content: "";
        width: 29px;
        height: 29px;
        background-image: url("/public/image/common/icon-button-search.png");
        background-size: cover;
        margin-right: 10px;
      }

      .input {
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid #9cd7dd;
        border-left: 0;
        width: 223.5px;
        height: 23px;
        line-height: 23px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #9cd7dd;
        background-color: transparent;
      }

      ::-webkit-input-placeholder {
        color: #9cd7dd;
        font-size: 14px;
      }
    }

    .legends {
      position: absolute;
      left: 533.5px;
      top: 27px;
      display: block;

      .legend {
        display: inline-block;
        width: 64px;
        height: 25.5px;
        line-height: 25.5px;
        text-align: center;
        border-radius: 15px;
        border-width: 1px;
        border-style: solid;
        font-size: 12px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        margin-right: 10px;

        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }

  .left-area {
    width: 232px;
    height: 620px;
    background: #ffffff;
    border-radius: 15px;
    position: absolute;
    left: 10px;
    top: 71.5px;
    padding: 16px;

    .table-header {
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 76px;
      height: 76px;
    }

    .table-content {
      height: calc(100% - 76px);
      overflow-y: auto;

      .table-row {
        line-height: 38.5px;
        border-top: 1px solid #f1f2f4;
        position: relative;

        .row-group {
          font-size: 16px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #089bab;
        }

        .row-num {
          font-size: 16px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #9cd7dd;
          text-align: center;
        }
      }
    }
  }

  .right-area {
    width: 1021px;
    height: 620px;
    background: #ffffff;
    border-radius: 15px;
    position: absolute;
    right: 7.5px;
    top: 71.5px;

    .calendar {
      height: 100%;
      padding-bottom: 16px;
      position: relative;

      .calendar-header {
        display: block;
        height: 92px;
        position: relative;

        .calendar-date-range {
          position: absolute;
          left: 54.5px;
          right: 54.5px;
          height: 100%;

          .calendar-date {
            height: 100%;

            .col-month {
              height: 20px;
              line-height: 20px;
              text-align: center;
              margin-top: 9px;
              margin-bottom: 5.5px;

              .font-month {
                font-size: 14px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #089bab;
              }
            }

            .col-date {
              height: 41.5px;
              width: 37.5px;
              display: block;
              text-align: center;
              margin: 0 auto;
              padding: 6px 0;

              .font-day {
                font-size: 12px;
                font-family: PingFang SC-Heavy, PingFang SC;
                font-weight: 800;
                color: #333333;
              }

              .font-weekday {
                font-size: 10px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #979797;
              }
            }

            .col-weekend {
              background-color: #f1f2f4;
              border-radius: 10px;
            }
          }
        }
      }

      .calendar-content {
        display: block;
        margin: 0 54.5px;
        height: calc(100% - 92px);
        overflow-y: auto;
        position: relative;

        .calendar-row {
          .calendar-col {
            height: 39.5px;
            border: 1px solid #eaedf7;
            line-height: 39.5px;
            text-align: center;
            font-size: 12px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #ffffff;
            position: relative;
          }

          .more {
            border-radius: 0 0 8px 0;

            &::after {
              content: "";
              width: 7.5px;
              height: 7.5px;
              background: rgba(255, 255, 255, 0.5);
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }

          @mixin bg-farming($index: 3) {
            background-image: url("/public/image/farming-calendar/bg-farming-#{$index}.png");
            background-size: cover;
            cursor: pointer;
          }

          .bg-farming-3 {
            @include bg-farming(3);
          }

          .bg-farming-4 {
            @include bg-farming(4);
          }

          .bg-farming-5 {
            @include bg-farming(5);
          }

          .bg-farming-6 {
            @include bg-farming(6);
          }

          .bg-farming-7 {
            @include bg-farming(7);
          }

          .bg-farming-8 {
            @include bg-farming(8);
          }

          .bg-farming-9 {
            @include bg-farming(9);
          }

          .bg-farming-10 {
            @include bg-farming(10);
          }

          .bg-farming-11 {
            @include bg-farming(11);
          }
        }
      }

      .before-button {
        background-image: url("/public/image/farming-calendar/icon-button-before.png");
        background-size: cover;
        width: 41.5px;
        height: 95px;
        position: absolute;
        left: 7.5px;
        top: 312px;
        cursor: pointer;
      }

      .after-button {
        background-image: url("/public/image/farming-calendar/icon-button-after.png");
        background-size: cover;
        width: 41.5px;
        height: 95px;
        position: absolute;
        right: 7.5px;
        top: 312px;
        cursor: pointer;
      }
    }
  }

  .dialog-bg {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background: rgba(18, 26, 45, 0.2);

    .dialog-window {
      position: relative;
      width: 605px;
      height: 671px;
      margin: 39.5px auto;
      background: #FFFFFF;
      border-radius: 10px;
      overflow-y:auto;

      .dialog-header {
        height: 60px;

        .name {
          position: absolute;
          left: 27.5px;
          top: 27px;
          height: 16px;
          line-height: 16px;
          font-size: 16px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
        }

        .icon-close {
          background: url("/public/image/farming-calendar/icon-dialog-close.png");
          background-size: cover;
          width: 35.5px;
          height: 35.5px;
          position: absolute;
          right: 17.5px;
          top: 20.5px;
          cursor: pointer;
        }
      }

      .dialog-content {
        height: calc(100% - 60px - 72px);

        .farming-types {
          width: 174px;
          margin: 30px auto 0 auto;

          .type-button {
            width: 174px;
            height: 39px;
            border-width: 1px;
            border-style: solid;
            border-radius: 8px;
            margin-top: 18px;
            cursor: pointer;
            text-align: center;
            line-height: 39px;
          }
        }

        .farming-detail {
          width: 450px;
          margin: 30px auto 0 auto;
        }

        .farming-list {
          padding: 14px 50px 0 50px;
          overflow-y: auto;

          .farmland {
            color: #9cd7dd;
            display: inline-block;

            &::before {
              content: '地块:';
              display: inline-block;
              vertical-align: top;
              margin-right: 6px;
              color: #979797;
            }
          }

          .farming-date {
            color: #9cd7dd;
            display: inline-block;
            text-align: right;

            &::before {
              content: '日期:';
              display: inline-block;
              vertical-align: top;
              margin-right: 6px;
              color: #979797;
            }
          }

          .farming {
            width: 507px;
            height: 183px;
            border-radius: 5px;
            box-shadow: 0 2px 10px 0.5px rgba(0, 0, 0, 0.1);
            margin: 8px 0;
            padding: 15px 20px;

            .title {
              .type {
                display: inline-block;
                vertical-align: top;
                width: 50%;
                font-size: 18px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 800;
                color: #333333;
                line-height: 21px;
              }

              .status {
                display: inline-block;
                width: 50%;
                font-size: 16px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FF7EA8;
                text-align: right;
              }

              margin-bottom: 17.5px
            }

            .content {
              .content-item {
                font-size: 14px;
                font-family: PingFang SC-Medium, PingFang SC;
                line-height: 16px;
                margin-bottom: 12.5px;

                &:last-of-type {
                  margin-bottom: 0;
                }

                .item-name {
                  display: inline-block;
                  vertical-align: top;
                  color: #333333;
                  width: 80px;
                }

                .item-value {
                  display: inline-block;
                  color: #333333;
                  width: calc(100% - 80px);
                  overflow-wrap: anywhere;
                }
              }
            }
          }
        }
      }

      .dialog-footer {
        height: 72px;
        text-align: center;

        .button1 {
          background: #EBF7F8;
          color: #089BAB;
        }

        .button2 {
          background: #089BAB;
          color: #FFFFFF;
        }
      }
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }
}
</style>
